{% extends 'user/user_base.html' %}
{% load static %}

{% block main %}
<div class="login-container">
    <div class="login-card">
        <div class="card-header">
            <h2>创建账户</h2>
            <p>注册您的新账户</p>
        </div>

        <form action="" method="post" class="login-form">
            {% csrf_token %}
            <div class="form-group">
                {{ form.email.label_tag }}
                <div class="input-wrapper">
                    {{ form.email }}
                    <span class="input-icon">
                        <i class="fas fa-envelope"></i>
                    </span>
                </div>
                {% if form.email.errors %}
                    {% for error in form.email.errors %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.password.label_tag }}
                <div class="input-wrapper">
                    {{ form.password }}
                    <span class="input-icon">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                {{ form.password2.label_tag }}
                <div class="input-wrapper">
                    {{ form.password2 }}
                    <span class="input-icon">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
                {% if form.password2.errors %}
                    {% for error in form.password2.errors %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_captcha">验证码</label>
                <div class="captcha-wrapper">
                    <div class="input-wrapper">
                        {{ form.captcha }}
                    </div>
                </div>
                {% if form.captcha.errors %}
                    {% for error in form.captcha.errors %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                <button type="submit" class="btn-login">注册</button>
                <a class="btn-register" href="{% url 'user:login' %}" role="button">已有账号？去登录</a>
            </div>
        </form>
    </div>
</div>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    padding: 20px;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-header {
    text-align: center;
    margin-bottom: 30px;
}

.card-header h2 {
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
}

.card-header p {
    color: #666;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
    font-size: 14px;
}

.input-wrapper {
    position: relative;
}

.form-group input {
    width: 100%;
    padding: 14px 16px 14px 45px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    background-color: #f9fafb;
}

.form-group input:focus {
    outline: none;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    background-color: #fff;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4a6cf7, #6a93ff);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(74, 108, 247, 0.3);
}

.btn-login:hover {
    background: linear-gradient(135deg, #3a5ce5, #5a83f0);
    box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4);
    transform: translateY(-2px);
}

.btn-register {
    display: block;
    text-align: center;
    padding: 12px;
    color: #4a6cf7;
    text-decoration: none;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    background-color: #fff;
}

.btn-register:hover {
    background-color: #f8f9fa;
    border-color: #4a6cf7;
    text-decoration: none;
    color: #3a5ce5;
    transform: translateY(-1px);
}

.captcha-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.captcha-wrapper .input-wrapper {
    flex: 1;
}

/* 验证码输入框特殊样式 */
#id_captcha_1 {
    padding-left: 45px !important;
}

/* 验证码图片样式 */
.captcha-wrapper img {
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    cursor: pointer;
    transition: all 0.3s;
}

.captcha-wrapper img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.text-danger {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 5px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }

    .captcha-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .captcha-wrapper img {
        align-self: center;
        margin-top: 10px;
    }
}
</style>

<!-- 引入Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}

{% block js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 点击验证码图片刷新
    $('.captcha').click(function () {
        $.getJSON("/captcha/refresh/", function (result) {
            console.log(result,'===');
            $('.captcha').attr('src', result['image_url']);
            $('#id_captcha_0').val(result['key']);
        });
    });

    // 为验证码输入框添加图标
    if ($('#id_captcha_1').length) {
        $('#id_captcha_1').wrap('<div class="input-wrapper"></div>');
        $('#id_captcha_1').before('<span class="input-icon"><i class="fas fa-shield-alt"></i></span>');
    }

    // 输入框交互效果
    $('input').on('focus', function() {
        $(this).parent().css('transform', 'scale(1.02)');
    }).on('blur', function() {
        $(this).parent().css('transform', 'scale(1)');
    });

    // 表单提交动画
    $('form').on('submit', function() {
        $('.btn-login').html('<i class="fas fa-spinner fa-spin"></i> 注册中...');
        $('.btn-login').prop('disabled', true);
    });
});
</script>
{% endblock %}